<template>
    <div class="wiper">
        <Filter title="组织机构" :items="items" :model="filterModel" />
        <Table :columns="columns" :data="data" :pagination="filterModel"/>
        <Form ref="form" v-model:show="show" :rules="rules" v-model:model="formModel" :items="formItems">

        </Form>
    </div>
</template>
<script>
    import Filter from "../../components/Filter";
    import Table from "../../components/Table";
    import Form from "../../components/Form";
    import {pager, listTree, save, remove, details} from "../../api/organization";
    import {ColumnProps, RuleProps, FormProps,
        FilterItems, FormItems, FilterModelProps} from "./config";
    import {Dictionary} from "../../utils/Dictionary";

    export default {
        name: 'organization',
        data(){
            return{
                items: FilterItems,
                data: [],
                show: false,
                formModel: FormProps,
                rules: RuleProps,
                columns: ColumnProps,
                filterModel: {
                    ...FilterModelProps,
                    onChange: (page, pageSize)=>{
                        this.filterModel.current = page;
                        this.filterModel.pageSize = pageSize;
                        this.load();
                    }
                },
                formItems: FormItems
            }
        },
        components:{
            Filter,
            Table,
            Form
        },
        computed:{
            isDictionary(){
                return this.$store.state.dictionary
            }
        },
        watch: {
            isDictionary(data){
                this._organizationType(data);
            },
            'formModel.type':{
              handler:function (val){
                let wcCodeForm = this.formItems.filter(item => item.key === "wcCode")[0];
                if(val === '1'){
                  wcCodeForm.label = '部门编号';
                  wcCodeForm.placeholder = '请输入部门编号';
                  wcCodeForm.isShow = true;
                }else if (val === '2'){
                  wcCodeForm.label = '班组编号';
                  wcCodeForm.placeholder = '请输入班组编号';
                  wcCodeForm.isShow = true;
                }else {
                  wcCodeForm.isShow = false;
                }
              }
            }
        },
        mounted(){
            this._organizationType(this.$store.state.dictionary);
            this._listTree();
            this.load();
        },
        methods: {

            /**
             * 添加方法
             */
            add(){
                this.formModel.id = "";
                this.$refs.form.resetField();
                this._organizationType(this.$store.state.dictionary);
                this._listTree();
                this.show = true;
            },

            /**
             * 修改方法
             */
            modify(ids){
                this.show = true;
                details(ids.join(",")).then(res => {
                    this.formModel = {...res.data,
                        parentId: res.data.parentId === 1 ? '' : res.data.parentId};
                });
            },

            /**
             * 删除方法
             */
            delete(ids){
                return new Promise((resolve, reject) => {
                    remove(ids.join(",")).then(res => {
                        this.load();
                        return resolve(res);
                    }).catch(e => {
                        return reject(e);
                    })
                })
            },

            /**
             * 提交
             */
            submit(){
                return new Promise((resolve, reject)=> {
                    save(this.formModel).then(res => {
                        this.load();
                        return resolve(res);
                    }).catch((e)=>{
                        return reject(e);
                    })
                })
            },


            /**
             * 加载数据
             */
            load(){
                pager(this.filterModel).then(res => {
                    this.data = res.data.rows;
                    this.filterModel.total = res.data.total;
                })
            },

            /**
             * 重命名
             * @private
             */
            _rename(list, key = "id"){
                return list?.map(item => {
                    return {label: item.name, value: item[key],children: this._rename(item.children)}
                });
            },

            /**
             * 组织机构类型
             * @param data
             * @private
             */
            _organizationType(data){
                const organizationTypes =  this._rename(data.filter(item => item.code === Dictionary.ORGANIZATION_TYPE)
                    .map(item => item.children)[0], "code");
                this.formItems.filter(item => item.key === 'type')[0].data = organizationTypes;
            },

            /**
             * 加载树形
             * @private
             */
            _listTree(){
                listTree().then(res => {
                    this.formItems.filter(e => e.key === 'parentId')[0].data = this._rename(res.data)
                }).catch(e => {
                    console.error(e);
                })
            },
        }
    }
</script>
<style>

</style>
